<template>

	<div class="app">
		<myNavbar title="重置密码" backTyep="1"></myNavbar>
		<div class="conter">
			<div class="conter-up border-bottom Underline">
				<text  class="conter-up-text">{{"验证码"}}</text>
        <input placeholder="填写" style="margin-left: 55px;height: 107px;width: 300px" v-model="verifyCode">
				<div>
					<button class="button01" :disabled="disabled" :text="btntxt" @click="sendcode" style="width:200px;height:60px;	 background-image: linear-gradient(to right, #0ED2F7, rgba(83, 168, 255, 1));margin-top: 25px;margin-right:25px;border-radius: 10px; "></button>
				</div>
			</div>
			<div class="conter-centre border-bottom Underline">
				<text   class="conter-centre-text">{{"登录密码"}}</text>
				<input placeholder="设置新密码" style="height: 107px;width: 300px;margin-left: 40px;" v-model="newPwd">
			</div>
			<div class="conter-below border-bottom Underline">
				<text  class="conter-below-text">{{"确认密码"}}</text>
				<input  placeholder="请再次填写" style="height: 107px;width: 300px;margin-left: 40px;" v-model="confirmPwd">
			</div>

		</div>
		<button text="确定" style="width: 700px;height: 90px;margin-top: 20px;margin-left: 40px;	 background-image: linear-gradient(to right, #0ED2F7, rgba(83, 168, 255, 1));"
		 @click="confirmAlter"></button>
	</div>

</template>
<style lang="css" src="../../../style/common.css" />
<style scoped>
    .app {
        flex: 1;
        background-color: #f9f9f9;
    }

    .conter {
        /*height: 380px;*/
        background-color: #FFFFFF;
        margin-top: 30px;
        margin-left: 20px;
        width: 710px;
    }

    .conter-up {
        justify-content: space-between;
        flex-direction: row;
    }

    .conter-up-text {
        font-size: 29px;
        font-weight: 400;
        color: #333333;
        padding: 40px 0 43px 20px;
    }


    .conter-centre {
        justify-content: flex-start;
        flex-direction: row;
    }

    .conter-centre-text {
        font-size: 29px;
        font-weight: 400;
        color: #333333;
        padding: 40px 0 43px 20px;
    }

    .conter-below {
        justify-content: flex-start;
        flex-direction: row;
    }

    .conter-below-text {
        font-size: 29px;
        font-weight: 400;
        color: #333333;
        padding: 40px 0 43px 20px;
    }

    .below {
        flex-direction: row;
        justify-content: center;
    }

    .below-text {
        padding-top: 50px;
        padding-left: 40px;
        font-size: 29px;
        font-weight: 400;
        color: #666666;
    }

    .below-txt {
        padding-top: 50px;
        /*padding-left: 40px;*/
        font-size: 29px;
        font-weight: 400;
        color: #D1060F;
    }
    .Underline{
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: #eaeaea;
    }


</style>
<script>

	import md5 from 'js-md5';
	import myNavbar from "../../../components/myNavbar/myNavbar";
	import {
		resetPwd,
		sendMsg
	} from '../../../api/user';
  import {getInfo} from "../../../api/member.js";

  const communication = app.requireModule("eeui/communication");
	export default {
		components: {
			myNavbar
		},
		data() {
			return {
				disabled: false,
				time: 0,
				btntxt:"获取验证码",
				verifyCode:"",
				newPwd:"",
				confirmPwd:"",
				username:'',
				mobile:'',
				sendMsg: {},
				resetPwd: {}
			}

		},
		mounted: function () {
			this.username = app.config.params.username
			this.mobile = app.config.params.mobile
    },
		methods: {
      getGetInfo() {
        getInfo().then(res => {
          this.mobile = res.data.member.mobile
        })
      },
			getSendMsg() {
				sendMsg({
					tplKey: 'register',
					username: this.mobile //从上一个页面手机号传值（mobile）
				}).then(res => {
          if (res.type == "success") {
            eeui.toast({
							message: '验证码已发送'
						})
					}else{
						eeui.toast({
							message: '验证码发送失败，请稍后重试！'
						})
					}
				})
			},
			sendcode() {
				if (this.time == 0) {
					this.getSendMsg()
				}
				this.time = 30;
				this.timer();
			},
			//发送手机验证码倒计时
			timer() {
				if (this.time > 0) {
					this.disabled = true;
					this.time--;
					this.btntxt = this.time + "秒";
					console.warn(this.btntxt)
					setTimeout(this.timer, 1000);
				} else {
					this.time = 0;
          this.btntxt = '重新发送'
					this.disabled = false;
				}
			},

			confirmAlter() {
				if(!this.newPwd.length){
					eeui.toast({
						message: '密码不能為空！'
					})
					return
				}
				if(this.newPwd !== this.confirmPwd){
					eeui.toast({
						message: '密码不一致！'
					})
					return
				}
        resetPwd({},{
          mchId:this.getGlobalData().mchId,
          password: md5(this.newPwd),
					username: this.username,
					verifyCode: this.verifyCode
				}).then(res => {
          // TODO 解析数据
					if (res.type == "success") {
						eeui.toast({
							message: '密码修改成功！'
						})
            eeui.closePage()
					}else{
						eeui.toast({
							message: '密码修改失败，请稍后重试！'
						})
					}
				})
			},
			toService() {
				communication.call('415-736-0000')
			},
		},
		created: function() {
		},
	}
</script>
